現在畫面上的 Icon 都是暫時寫死固定的，跟目前的天氣資訊並不符合，所以這篇文章會示範如何運用 Expo Icon 來更新天氣 Icon。

了解 OpenWeatherMap API

在開始之前，要先了解一下，其實 OpenWeatherMap API 有提供天氣 Icon 的資訊，只是我們在前面的文章中並沒有使用到，所以這裡要先來看一下 OpenWeatherMap API 的官方文件。

在取得天氣資訊時，每一個天氣狀態都會有提供 icon，是一個字串，例如：

{
  "weather": [
    {
      "id": 800,
      "main": "Clear",
      "description": "clear sky",
      "icon": "01d"
    }
  ]
}

而這個 icon 就是天氣 Icon 的代號，只要將這個代號加上 https://openweathermap.org/img/wn/，再加上 .png 就可以取得天氣 Icon 的網址了，例如：

https://openweathermap.org/img/wn/01d.png

詳細的比對可參照下圖：

但是這個專案沒有要使用 OpenWeatherMap 的天氣 Icon 圖片，而是要使用 Expo Icons，可以參考 Expo Icon 官方文件。

設定天氣 Icon

由於之前在設定狀態時，已經都先把 icon 預留在狀態中了，所以每次呼叫 API 時，我們的狀態中都會有 icon 的資訊，只是目前還沒有用到而已，所以這裡要來更新一下天氣 Icon。

可以先按照上面的比對圖去 Expo Icons 搜尋一下，找到對應的 Icon 名稱。然後因為在 Day 18 - 重構 TypeScript icon 設定 已經有設定過 Icon 的型別，所以這裡再調整一下。

// src/config/WeatherIconConfig.ts
import { ComponentType } from 'react'
import { Ionicons, Fontisto } from '@expo/vector-icons'

export type IoniconsNames = keyof typeof Ionicons.glyphMap
export type FontistoNames = keyof typeof Fontisto.glyphMap

export interface WeatherIconConfig {
  component: ComponentType<any>
  name: IoniconsNames | FontistoNames
  color: string
}

export const weatherIcons: Record<string, WeatherIconConfig> = {
  '01d': { component: Ionicons, name: 'sunny', color: '#FFD700' },
  '01n': { component: Ionicons, name: 'sunny', color: '#64635e' },
  '02d': {
    component: Ionicons,
    name: 'partly-sunny-outline',
    color: '#cfd8e2'
  },
  '02n': { component: Ionicons, name: 'partly-sunny-sharp', color: '#64635e' },
  '03d': { component: Ionicons, name: 'cloud-outline', color: '#cfd8e2' },
  '03n': { component: Ionicons, name: 'cloudy-night-sharp', color: '#64635e' },
  '04d': { component: Ionicons, name: 'cloud-outline', color: '#cfd8e2' },
  '04n': { component: Ionicons, name: 'cloudy-night-sharp', color: '#64635e' },
  '09d': { component: Ionicons, name: 'rainy-outline', color: '#a9b2bc' },
  '09n': { component: Ionicons, name: 'rainy', color: '#64635e' },
  '10d': { component: Ionicons, name: 'rainy-outline', color: '#a9b2bc' },
  '10n': { component: Ionicons, name: 'rainy', color: '#64635e' },
  '11d': {
    component: Ionicons,
    name: 'thunderstorm-outline',
    color: '#a9b2bc'
  },
  '11n': { component: Ionicons, name: 'thunderstorm', color: '#64635e' },
  '13d': { component: Ionicons, name: 'snow', color: '#a9b2bc' },
  '13n': { component: Ionicons, name: 'snow', color: '#64635e' },
  '50d': { component: Fontisto, name: 'fog', color: '#a9b2bc' },
  '50n': { component: Fontisto, name: 'fog', color: '#64635e' }
}

這裡大部分的 Icon 元件我都是使用 Ionicons，只有 50d 和 50n 使用 Fontisto，因為 Ionicons 沒有對應的 Icon。

更新各個元件

接著要來更新各個元件：

CurrentWeather

HourlyForecast

DailyForecast

最後更新 App.tsx 原本寫死的 Icon：

這樣全部的 Icon 就更新完成了。